<template>
  <div class="day-form-page">
    <el-card class="form-card">
      <h2 class="form-title">{{ title }}</h2>
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="今日步数" prop="stepNumber">
          <el-input v-model="formData.stepNumber" placeholder="请输入今日步数" />
        </el-form-item>
        <el-form-item label="今日饮水量" prop="waterVolume">
          <el-input v-model="formData.waterVolume" placeholder="请输入今日饮水量" />
        </el-form-item>
        <el-form-item label="今日入睡时间" prop="sleepTime">
          <el-time-picker clearable v-model="formData.sleepTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
            placeholder="请选择今日入睡时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="今日起床时间" prop="wakeupTime">
          <el-time-picker clearable v-model="formData.wakeupTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
            placeholder="请选择今日起床时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="今日最高收缩压" prop="sbp">
          <el-input v-model="formData.sbp" placeholder="请输入收缩压" />
        </el-form-item>
        <el-form-item label="今日最高舒张压" prop="dbp">
          <el-input v-model="formData.dbp" placeholder="请输入舒张压" />
        </el-form-item>
        <el-form-item label="今日体重" prop="weightDiff">
          <el-input v-model="formData.weightDiff" placeholder="请输入今日体重" />
        </el-form-item>
      </el-form>
      <div class="form-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request';
import { listDay, getDay, delDay, addDay, updateDay } from "@/api/system/day";
export default {
  name: 'DayFormPage',
  props: {
    title: {
      type: String,
      default: '登记数据'
    },
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: { ...this.form },
      rules: {
        stepNumber: [
          { required: true, message: "步数不能为空", trigger: "blur" }
        ],
        waterVolume: [
          { required: true, message: "饮水量不能为空", trigger: "blur" }
        ],
        sleepTime: [
          { required: true, message: "入睡时间不能为空", trigger: "blur" }
        ],
        wakeupTime: [
          { required: true, message: "起床时间不能为空", trigger: "blur" }
        ],
        sbp: [
          { required: true, message: "收缩压不能为空", trigger: "blur" }
        ],
        dbp: [
          { required: true, message: "舒张压不能为空", trigger: "blur" }
        ],
        weightDiff: [
          { required: true, message: "体重不能为空", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    form: {
      handler(newVal) {
        this.formData = { ...newVal };
      },
      immediate: true
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      request({
        url: '/gather/UserDay/today',
        method: 'get'
      }).then(res => {
        if (res.data && Array.isArray(res.data)) {
          // 只取当天数据（假设第一个是当天）
          this.formData = res.data[0] || {};
        }
      }).catch(error => {
        console.error('获取数据失败:', error);
      });
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.formData.id != null) {
            updateDay(this.formData).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit('cancel');
            });
          } else {
            addDay(this.formData).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit('cancel');
            });
          }
        }
      });
    },
    cancel() {
      this.$emit('cancel');
    }
  }
};
</script>

<style scoped>
.day-form-page {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
}

.form-card {
  width: 100%;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
}

.form-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

.form-title {
  text-align: center;
  margin-bottom: 20px;
  color: #2c3e50;
  font-weight: 600;
}

.form-footer {
  text-align: right;
  margin-top: 20px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>